<template>
  <div>
    B子组件
    <!-- 给当前插槽的 默认值 -->
    <div class="header">
      <slot name="header">我是头部</slot>
    </div>
    <div class="main">
      <slot name="main">我是主体</slot>
    </div>
    <div class="footer">
      <div v-for="(item, idx) in nameArr" :key="idx">
        <!-- 向父组件 传递数据 以data接受 -->
        <slot :data="item"></slot>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'slotChild',
  data() {
    return {
      nameArr: [
        {
          name: '被插入1次',
          age: 10,
        },
        {
          name: '被插入2次',
          age: 20,
        },
        {
          name: '被插入3次',
          age: 30,
        },
      ],
    }
  },
}
</script>
